<template>
  <div class='see-detail'>
    <!-- 这一块还要加个顶部打开app,加个返回键 -->
    <topapp></topapp>
    <!-- 绑定页面标识和播放状态 -->
    <videoplay
      :isShow=flag
      :state=state
      :movielist="movielist"
    >
      <template #btn>
        <!-- 通过改变透明度控制按钮显示与否 -->
        <div
          class="play"
          @click="goToPlay"
          :style="{opacity:!state?'1':'0'}"
        ></div>
      </template>
    </videoplay>
  </div>
</template>
<script>
import videoplay from '../../components/see/videoPlay'
import topapp from '../../components/see/topApp'
export default {
  data: () => ({
    flag: false,
    state: false,
    movielist: {}
  }),
  components: {
    videoplay,
    topapp
  },
  mounted() {
    this.movielist = this.$route.params
    // this.getMovieDetail(this.$route.params.id)
  },
  methods: {
    goToPlay() {
      // console.log('点击播放')
      this.state = !this.state
      // console.log('父组件' + this.state)
    }
    // async getMovieDetail(objjjjjj) {
    //   // const res = await this.$http.getMovieDetail(myid)
    //   console.log(this.$route.params)
    //   // this.movielist = res.data.message[0]
    // }
  }
}
</script>
<style lang="scss" scoped>
.see-detail {
  .video-item {
    .play {
      z-index: 10;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 42px;
      height: 42px;
      margin-left: -21px;
      margin-top: -21px;
      // background-image: url(http://p1.meituan.net/moviemachine/0bde92ac8061da52eee903fdafc483da6378.png);
      background-image: url(http://p1.meituan.net/moviemachine/0bde92ac8061da52eee903fdafc483da6378.png);
      background-size: contain;
    }
  }
}
</style>
